.util {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
  margin: 20px;
  border-radius: 4px;
  background: #ffffff;
  transition: margin .3s ease;

  &-header {
    display: flex;
    background: #FFFFFF;
    box-shadow: inset 0 -1px 0 0 #EBF0F5;
    justify-content: space-between;
    padding: 16px 20px;
  }

  &-label {
    margin-right: 8px;
    background: #FFFFFF;
    border: 1px solid #CDD7EC;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 12px;
    color: #4E5B71;

    &:hover {
      cursor: pointer;
    }
  }

  &-labels {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 20px;
  }

  &-label-selected {
    background: rgba(211, 227, 255, 0.30);
    color: #2B78FF;
    border: 1px solid #2B78FF;
  }

  &-attachment {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .util-attachment-child + .util-attachment-child {
      margin-left: 15px;
    }

    .line {
      user-select: none;
    }
  }

  &-kinds {
    @extend .util-attachment
  }

  &-audit-text {
    font-size: 12px;
    margin-left: 10px;
  }

  &-icon {
    width: 18px;
    height: 18px;

    &:hover {
      cursor: pointer;

      path {
        fill: #4B8DFF;
      }

      polyline, line {
        stroke: #4B8DFF
      }

    }

    &[disabled] {
      cursor: not-allowed;

      path {
        fill: #CDD7EC
      }

      polyline, line {
        stroke: #CDD7EC
      }
    }
  }

  .util-kinds-child + .util-kinds-child {
    margin-left: 32px;
  }

  .util-kinds-child:nth-child(2) {
    margin-left: 16px;
  }

  .util-kinds-child:last-child {
    margin-left: 16px;
  }

  &-kinds-text {
    font-size: 12px;
    color: #4E5B71;
    text-align: center;
    line-height: 16px;
    transition: font-size .5s;
    cursor: pointer;
  }

  &-list-mode {
    box-shadow: 0 1px 0 0 #EBF0F5;
    width: 100%;
    margin-top: 0;
  }

  &-kinds-text-line {
    position: relative;
    font-size: 14px;
    color: #1E2126;
    text-align: center;
    line-height: 16px;

    &:after {
      width: 100%;
      bottom: -16px;
      content: '';
      background: #4B8DFF;
      height: 2px;
      position: absolute;
      left: 0;
    }
  }
}


